<template>
  <div class="viewMessage-container">
    <el-card class="viewMessage" shadow="never">
      <!--      表格-->
      <el-table border stripe :cell-style="cellStyle" v-loading="loading"
                :header-cell-style="cellStyle" :data="noticeShowData">
        <el-table-column prop="noticeTitle" label="通知标题">
          <template v-slot="scope">
            <el-link :type="scope.row.noticeType===0?'success':'primary'" @click="showNotice(scope.row.id)">{{ scope.row.noticeTitle }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="noticeType" label="通知类型">
          <template v-slot="scope">
            <el-tag :type="scope.row.noticeType===0?'success':'primary'">
              {{ scope.row.noticeType === 0 ? '全体通知' : '个体通知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人" ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" ></el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 10, 20,50,100]" :page-size="this.pageSize" :current-page="this.page"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>

      <div>

      </div>
      <ShowNotice/>
    </el-card>
  </div>
</template>


<script>
import store from '@/store'
import ShowNotice from '@/components/notice/ShowNotice.vue'
import { GetUserNoticeApi } from '@/request/message/notice-api'
export default {
  components:{
    ShowNotice
  },
  created () {
    this.initUserNotice()
  },
  data(){
    return{
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      loading: false,
      noticeShowData:[]
    }
  },
  methods:{
    showNotice (id) {
      store.commit('NoticeEdit/changeShowNoticeSync', true)
      store.commit('NoticeEdit/changeShowNoticeId', id)
    },
    cellStyle () {
      return 'padding:5px;text-align:center'
    },  // 查询
    handleQuery () {
      this.page = 1
      this.initUserNotice()
    },
    // pageSize切换
    handleSizeChange (val) {
      this.pageSize = val
      this.initUserNotice()
    },
    // 当前页面切换
    handleCurrentChange (val) {
      this.page = val
      this.initUserNotice()
    },
    async initUserNotice () {
      const params={
        page:this.page,
        pageSize:this.pageSize
      }
      let res = await GetUserNoticeApi(params)
      if (res&&res.code===200){
        this.counts=res.data.total
        this.noticeShowData=res.data.records
      }else {
        this.$message.error(res.msg?res.msg:"查询通知失败")
      }
    }
  }
}
</script>
<style scoped lang="less">
.el-pagination{
  margin: 20px;
  text-align: center;
}
/* el-divider 修改高度&虚线效果 */
.el-divider--horizontal{
  margin: 8px 0;
  background: 0 0;
  border-top: 1px dashed #e8eaec;
}
.el-card{
  padding-left: 20px;
  padding-top: 50px;
}
.show-notice {
  .el-link {
    font-size: 14px;
  }
}
</style>
